<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
  <head>
	<title>百Girl全书--美女排行榜</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="/bootstrap/css/bootstrap-responsive.css">
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
	<script type="text/javascript" charset="UTF-8" src="/js/jquery-1.7.2.min.js"></script>
	<script type="text/javascript" charset="UTF-8" src="/bootstrap/js/bootstrap.min.js"></script>
  	<script type="text/javascript" charset="UTF-8" src="/js/plugins/bootstrap-tab.js"></script>
  	<style type="text/css">
		body {
			padding-top: 60px;
			padding-bottom: 40px;
		}
		.movielist  li{
			background: none repeat scroll 0 0 #FFFFFF;
		    border: 1px solid #FFFFFF;
		    float: left;
		    overflow: hidden;
		    height: 175px;
		    margin: 0 auto;
		    padding: 0;
		    width: 137px;
		}
		.tab-pane .act {
		    color: #D7D7D7;
		    float: right;
		    margin:10px 40px 0px 0px;
		}
    </style>
  </head>
  <body>
	<!-- 公用头部 -->
	<%@ include file="../header.jsp"%>
    <div class="container">
    	<ul class="breadcrumb">
		    <li>
		    <a href="#">首页</a> <span class="divider">/</span>
		    </li>
		    <li class="active">排行榜</li>
	    </ul>
    
		<ul class="nav nav-tabs">
		    <li class="active"><a href="#index" data-toggle="tab">港台剧场</a></li>
		    <li><a href="#profile" data-toggle="tab">海外剧场</a></li>
		    <li><a href="#messages" data-toggle="tab">人气综艺</a></li>
		    <li><a href="#settings" data-toggle="tab">猜你喜欢</a></li>
		</ul>
		 
		<div class="tab-content">
			<div class="tab-pane active" id="index">
				<ul class="movielist movielist_133x93">
					<c:forEach var="index" begin="1" end="16" step="1">     
						<li>
							<div class="thumbnail">
					            <img alt="" src="http://img2.kankan.xunlei.com/gallery2/block/2012/07/07/d20fc956608c4631ba82413995fff9a9.jpg">
					            <div class="caption">
					              <h5>高富帅豪华空战</h5>
					              <p><a class="btn" href="#">支持</a> <a class="btn" href="#">反对</a></p>
					            </div>
					        </div>
						</li>
					</c:forEach> 
				</ul>
				<div class="act">
					<a href="#" title="更多>>>>">更多>>>></a>
				</div>
			</div>
			<div class="tab-pane" id="profile">
				<ul class="movielist movielist_133x93">
					<c:forEach var="index" begin="1" end="16" step="1">     
						<li>
							<div class="thumbnail">
					            <img alt="" src="http://img2.kankan.xunlei.com/gallery2/block/2012/07/07/60f3017e5fa3ed89d5df63c27ad6233a.jpg">
					            <div class="caption">
					              <h5>公子哥爱上天然呆</h5>
					              <p><a class="btn" href="#">支持</a> <a class="btn" href="#">反对</a></p>
					            </div>
					        </div>
						</li>
					</c:forEach> 
				</ul>
				<div class="act">
					<a href="#" title="更多>>>>">更多>>>></a>
				</div>
			</div>
			<div class="tab-pane" id="messages">
				<ul class="movielist movielist_133x93">
					<c:forEach var="index" begin="1" end="16" step="1">     
						<li>
							<div class="thumbnail">
					            <img alt="" src="http://img2.kankan.xunlei.com/gallery2/block/2012/07/07/12b5645b454bf5f2db98ecacd92056f6.jpg">
					            <div class="caption">
					              <h5>非诚勿扰</h5>
					              <p><a class="btn" href="#">支持</a> <a class="btn" href="#">反对</a></p>
					            </div>
					        </div>
						</li>
					</c:forEach> 
				</ul>
				<div class="act">
					<a href="#" title="更多>>>>">更多>>>></a>
				</div>
			</div>
			<div class="tab-pane" id="settings">
				<ul class="movielist movielist_133x93">
					<c:forEach var="index" begin="1" end="16" step="1">     
						<li>
							<div class="thumbnail">
					            <img alt="" src="http://img2.kankan.xunlei.com/gallery2/block/2012/07/06/0f031158f59ac313b2f6f9dbda70bf8d.jpg">
					            <div class="caption">
					              <h5>宫廷争斗潜规则</h5>
					              <p><a class="btn" href="#">支持</a> <a class="btn" href="#">反对</a></p>
					            </div>
					        </div>
						</li>
					</c:forEach> 
				</ul>
				<div class="act">
					<a href="#" title="更多>>>>">更多>>>></a>
				</div>
			</div>
		</div>
    </div> 
  </body>
</html>
<script type="text/javascript">
	$(document).ready(function() {
		//选中操作键
		$("#topn").addClass("active");
		//tab切换
		$('.tabs a:last').tab('show')
	});
</script>

